<script setup lang="ts">
import { computed } from "vue";
import Editor from "@tinymce/tinymce-vue";
import tinymceUrl from "tinymce/tinymce.min.js?url";
import langs from "./langs/";
import { useLocale } from "@/locales/useLocale";

const langName = computed(() => {
  const lang = useLocale().getLocale.value;
  return ["zh_CN", "en"].includes(lang) ? lang : "zh_CN";
});
const modelValue = defineModel<string>('value', { required: true });

</script>

<template>
  <div class="editor-wrapper">
    <Editor
      v-model="modelValue"
      api-key="zxvcw1ci8frmv9rkses7ygnungnuvaudf38n6m0rykw9axuz"
      :init="{
        height: 500,
        toolbar_mode: 'sliding',
        branding: false,
        default_link_target: '_blank',
        link_title: false,
        promotion: false,
        object_resizing: false,
        auto_focus: true,
        resize: true,
        language_url: langs[langName],
        language: langName,
        menubar: 'file edit insert view format table',
        plugins: [
          // Core editing features
          'anchor',
          'autolink',
          'charmap',
          'codesample',
          'emoticons',
          'image',
          'link',
          'lists',
          'media',
          'searchreplace',
          'table',
          'visualblocks',
          'wordcount',
          'checklist',
          'mediaembed',
          'casechange',
          'export',
          'formatpainter',
          'pageembed',
          'a11ychecker',
          'tinymcespellchecker',
          'permanentpen',
          'powerpaste',
          'advtable',
          'advcode',
          'mentions',
          'tinycomments',
          // Early access to document converters
        ],
        toolbar:
          'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
        tinycomments_mode: 'embedded',
        tinycomments_author: 'Author name',
      }"
      initial-value="请输入内容"
    />
  </div>
</template>

<style scoped></style>
